<template>
    <div class="LoginView-container">
        <div class="LoginWindow">
            <div class="LoginWindow-AtmospherePage">
                <img src="../assets/LoginView/atmosphere.svg" alt="SVG Image">
            </div>
            <div class="LoginWindow-LoginPage">
                <div class="LoginWindow-LoginPage-Head">
                    <img src="../assets/LoginView/HeadBackground.svg" alt="SVG Image">
                    <p>@中国传媒大学</p>
                </div>

                <div class="LoginWindow-LoginPage-FunctionalBlock">
                    <div class="LoginWindow-LoginPage-FunctionalBlock-Input">
                        <a-form @submit.prevent="login" :model="formState" name="basic" autocomplete="off" @finish="onFinish" @finishFailed="onFinishFailed">
                            <a-form-item name="username" :rules="[{ required: true, message: '请输入学号' }]">
                                <a-input placeholder="学号" v-model:value="formState.username" />
                            </a-form-item>

                            <a-form-item
                            name="password"
                            :rules="[{ required: true, message: '请输入密码' }]"
                            >
                            <a-input-password placeholder="密码" v-model:value="formState.password" />
                            </a-form-item>
                            <div class="LoginWindow-LoginPage-FunctionalBlock-Checkbox">
                                <a-form-item name="remember">
                                    <a-checkbox v-model:checked="formState.remember">自动登录</a-checkbox>
                                    <a href="" style="width:50px;height:50px;color: var(--65, #595959);font-family: 'PingFang SC';font-size: 12px;
                                    font-style: normal;
                                    font-weight: 400;
                                    line-height: normal;text-decoration-line: underline;text-underline-offset: 3px;
                                    position:absolute;left:280px;">忘记密码</a>
                                </a-form-item>
                                <a-checkbox v-model:checked="formState.agreeChecked">我已阅读并同意
                                    <a href="https://can2avd289d.feishu.cn/wiki/IJ5iw8NgfiQsMQk2dEBc33DMnmb?from=from_copylink
                                    " target="_blank">《用户隐私协议》</a>
                                    与
                                    <a href="https://can2avd289d.feishu.cn/wiki/AEXxwx338iX8WIkrbqgctFkEnhe?from=from_copylink" target="_blank">《产品使用协议》</a>
                                    </a-checkbox>
                            </div>
                            
                            <div class="LoginWindow-LoginPage-FunctionalBlock-LoginButton">
                                <a-form-item>
                                    <a-button type="primary" html-type="submit">登录</a-button>
                                </a-form-item>
                            </div>
                            
                        </a-form>
                    </div>
                    
                </div>
          
            </div>
        </div>
    </div>
</template>


<script lang="js" setup>
import { watch, reactive } from 'vue';
import { message } from 'ant-design-vue';
import router from '../router/index'; 
import api from '../api/index';

const formState = reactive({
  username: '',
  password: '',
  remember: true,
  agreeChecked: false,
});

const login = async () => {
    if(!formState.agreeChecked) {
        message.error('请选择阅读并同意相关协议！');
        return;
    }
    api.login(formState.username, formState.password)
  .then(response => {
    // console.log('登录成功', response.data);
    message.success('登录成功！');
    router.push('/dashboard');
  })
  .catch(error => {
    console.log('登录失败', error);
    message.error('登录失败，请检查您的用户名或密码！');
  });
};

// test
function validateUsername(username) {
  // 假设用户名必须以字母开头，且长度在5到12个字符之间
  // return /^[a-zA-Z]{5,12}$/.test(username);
  return true;
}

function validatePassword(password) {
  // 假设密码必须包含至少一个数字和一个大写字母，且长度在8到16个字符之间
  return /^(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,16}$/.test(password);
}
// 监听表单项的变化，可以在这里添加额外的逻辑
// 观察用户名和密码的变化
watch(() => [formState.username, formState.password], ([newUsername, newPassword], [oldUsername, oldPassword]) => {
  // 检查新输入的用户名和密码是否有效
  const isUsernameValid = validateUsername(newUsername);
  const isPasswordValid = validatePassword(newPassword);

  // 根据验证结果，更新表单的状态或UI
  if (isUsernameValid && isPasswordValid) {
    console.log('用户名和密码都有效，可以提交表单。');
    // 这里可以添加代码来启用提交按钮等
  } else {
    console.log('用户名或密码无效，禁止提交表单。');
    // 这里可以添加代码来禁用提交按钮或显示错误信息等
  }
});

const onFinish = (values) => {
  console.log('Success:', values);
};

const onFinishFailed = (errorInfo) => {
  console.log('Failed:', errorInfo);
};

</script>



<style>
/*背景容器*/
.LoginView-container {
 
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */

  background-image: url('@/assets/LoginView/background.jpg'); /* 设置背景图片的路径 */
  background-position: 0 0; /* 设置背景图片在容器内左上角对齐 */
  /* background-size: 100% 100%; 让背景图片填满整个容器 */
  background-size: cover;
  display: flex;
  width: 100vw; /* 宽度与背景图片大小保持一致 */
  height: 100vh; /* 高度与可视窗口高度一致 */
  background-repeat: no-repeat;

  padding: 0; /* 清除容器的内边距 */
  margin: 0; /* 清除容器的外边距 */


}

.LogWindow {
    display: flex;
    width: 900px;
    height:600px;

    font-size: 0;
    
    justify-content: space-between; /* 水平对齐子组件 */
    align-items: stretch; /* 子组件高度铺满父容器 */
    
}

.LoginWindow-AtmospherePage {
    width: 450px;
    height: auto; /* 根据内容高度调整 */
    flex-shrink: 0;
    /*flex:1;/*平分父组件*/
    display: inline-block; /* 或 display: inline; */
}

.LoginWindow-LoginPage {
    width: 450px;
    height: 600px;
    flex-shrink: 0;

    vertical-align: top;

    /*flex:1;*/
    display: inline-block; /* 或 display: inline; */
    text-align: center; /*让Head盒子居中*/

    position: relative;/*方便子元素定位*/
    
}

.LoginWindow-LoginPage-Head {
    width: 340px;
    height: 70px;
    position: relative;

    display: inline-block;
    margin-top: 50px;

    
}
.LoginWindow-LoginPage-Head img {
    display: inline;
    position:absolute;
    left: 0;
    bottom: 0;  
}
.LoginWindow-LoginPage-Head p {
    display: inline;
    /*文字样式*/
    color: var(--65, #595959);
    text-align: right;
    font-family: "PingFang SC";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;

    margin-bottom: 0;/*文字紧贴p底部*/
    
    position: absolute;
    bottom: 0;
    right: 0;
}


.LoginWindow-LoginPage-FunctionalBlock {
    position:absolute;
    top:60%;
    left: 50%;/*将元素的左上角定位到中心点，因此必须加上transform*/
    transform: translate(-50%, -50%);

}


.LoginWindow-LoginPage-FunctionalBlock-Input .ant-input {
    width: 340px;
    padding: 8px 12px;
    justify-content: center;
    align-items: center;
    gap: 6px;

    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.15);
}
/*修改输入框边框选中样式
.ant-input:focus {
    border-color: #00BD79 !important; 
    box-shadow: none;
}*/

.LoginWindow-LoginPage-FunctionalBlock-Input .ant-input-password {
    width: 340px;
    padding: 8px 12px;
    justify-content: center;
    align-items: center;
    gap: 6px;

    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.15);
}

.LoginWindow-LoginPage-FunctionalBlock-Checkbox {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* 左右两侧对齐 */
    margin-top: 40px;
    margin-bottom: 17px;
}


.LoginWindow-LoginPage-FunctionalBlock-Checkbox .ant-checkbox-wrapper {
    color: var(--65, #595959);
    text-align: right;
    font-family: "PingFang SC";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 200% */
}

.LoginWindow-LoginPage-FunctionalBlock-Checkbox .ant-form-item {
    margin-bottom: 8px;
}

.LoginWindow-LoginPage-FunctionalBlock-Checkbox .ant-form-item .ant-form-item-control-input-content {
    display: flex;
}
/*
.ant-checkbox-wrapper:not(.ant-checkbox-wrapper-disabled):hover .ant-checkbox-inner,
.ant-checkbox:not(.ant-checkbox-disabled):hover .ant-checkbox-inner {
    border-color: #00BD79; 
    
}
.ant-checkbox-wrapper.ant-checkbox-wrapper-checked .ant-checkbox-inner {
    border-color: #00BD79;
    background-color: #00BD79;
}
.ant-checkbox-wrapper.ant-checkbox-wrapper-checked:hover .ant-checkbox-inner {
    border-color: #00BD79;
    background-color: #00BD79;
}

.ant-checkbox-wrapper:not(.ant-checkbox-wrapper-disabled):hover .ant-checkbox-checked:not(.ant-checkbox-disabled) .ant-checkbox-inner {
    border-color: #00BD79;
    background-color: #00BD79;
}


.ant-checkbox-wrapper.ant-checkbox-wrapper-checked:hover .ant-checkbox-inner {
    border-color: #00BD79; 
}
*/

.LoginWindow-LoginPage-FunctionalBlock-LoginButton .ant-btn {
    border-radius: 12px;
    background: #262626;

    color: #FFF;
    font-family: "PingFang SC";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */

    width: 340px;
    height: 40px;

    justify-content: center;
    align-items: center;
}

.LoginWindow-LoginPage-FunctionalBlock-LoginButton .ant-btn:hover {
    background-color: #484848; /* 悬浮时的背景颜色 */
      border-color: #484848;    /* 悬浮时的边框颜色 */
      box-shadow: 0 0 0 1px #262626; /* 悬浮时的边框阴影 */
}

</style>